<template>
	<div class="tprnaall">

		<div class="TpRna" v-if="TpRnatype==1">
			<div class="TpRna-inputbox">
				<div class="TpRna-inputitem">
					<!--<div class="myyd-cell-item">
						<span>房东身份</span>
						<span style="color: #A4A4A4;">个人房东</span>
					</div>-->
					<div class="myyd-cell-item">
						<span>姓名</span>
						<input v-model="username" placeholder="请输入您的真实姓名"></input>
					</div>
					<div class="myyd-cell-item">
						<span>身份证号码</span>
						<input v-model="idCrad" placeholder="请输入您的有效证件号码"></input>
					</div>
				</div>
				<div class="TpRna-inputitem"></div>
			</div>
			<div class="TpRna-content">
				<div class="TpRna-conitem">
					<div class="TpRnac-title">
						<span><i>1</i></span>
						<p>请您上传身份证正反面照片，确保头像和信息清晰可见。</p>
					</div>
					<div class="TpRna-camerabox">
						<div class="TpRna-camera">
							<img v-if="isfileimg1" :src="fileimg1" class="TpRna-cameraimg TpRna-fileimg" />
							<img v-else class="TpRna-cameraimg TpRna-fileimg" src="../assets/img/images/TpRna1.jpg" />
							<input @change="update" name="file" type="file" accept="image/jpeg" multiple id="fileimg1" class="TpRna-cameraimg TpRna-inputimg " />
						</div>
					</div>

					<div class="TpRna-camerabox">
						<div class="TpRna-camera">
							<img v-if="isfileimg2" :src="fileimg2" class="TpRna-cameraimg TpRna-fileimg" />
							<img v-else class="TpRna-cameraimg TpRna-fileimg" src="../assets/img/images/TpRna2.jpg" />
							<input @change="update" name="file" type="file" accept="image/jpeg" multiple id="fileimg2" class="TpRna-cameraimg TpRna-inputimg " />
						</div>
					</div>
				</div>

				<div class="TpRna-conitem">
					<div class="TpRnac-title">
						<span><i>2</i></span>
						<p>请您上传手持身份证的照片，根据此照片来核 对您是证件所有人，请确保脸部,身份证文字 清晰。</p>
					</div>
					<div class="TpRna-camerabox">
						<div class="TpRna-camera">
							<img v-if="isfileimg3" :src="fileimg3" class="TpRna-cameraimg TpRna-fileimg" />
							<img v-else class="TpRna-cameraimg TpRna-fileimg" src="../assets/img/images/TpRna3.jpg" />
							<input @change="update" name="file" type="file" accept="image/jpeg" multiple id="fileimg3" class="TpRna-cameraimg TpRna-inputimg " />
						</div>
					</div>
				</div>
				<div style="font-size: .28rem;color: #282828;margin: .5rem 0;">注：有效证件为个人身份证、护照等处于有效期间的证件。</div>

			</div>
			<div class="TpRna-submitbtnbox" v-if="isCertification==0"><button class="TpRna-submitbtn" @click="setcardfun">确认提交</button></div>
			<div class="TpRna-submitbtnbox" v-if="isCertification==3&&Getidentitydata.type==2"><button class="TpRna-submitbtn" @click="setcardfun">重新认证</button></div>
		</div>
		<!--企业认证-->
		<div class="TpRna" v-if="TpRnatype==2">
			<div class="TpRna-inputbox">
				<div class="TpRna-inputitem">
					<!--<div class="myyd-cell-item">
						<span>房东身份</span>
						<span style="color: #A4A4A4;">企业房东</span>
					</div>-->
					<div class="myyd-cell-item">
						<span>企业名称</span>
						<input v-model="company" placeholder="请输入企业名称"></input>
					</div>
					<div class="myyd-cell-item">
						<span>企业执照号</span>
						<input v-model="company_number" placeholder="请输入企业执照号码"></input>
					</div>
					<div class="myyd-cell-item">
						<span>企业法人</span>
						<input v-model="legal_person" placeholder="请输入企业法人姓名"></input>
					</div>
					<div class="myyd-cell-item">
						<span>联系方式</span>
						<input v-model="contact_number" placeholder="请输入正确的联系方式"></input>
					</div>
				</div>
				<div class="TpRna-inputitem"></div>
			</div>
			<div class="TpRna-content">
				<div class="TpRna-conitem">
					<div class="TpRnac-title">
						<span><i>1</i></span>
						<p>请您上传身份证正反面照片，确保头像和信息清晰可见。</p>
					</div>
					<div class="TpRna-camerabox">
						<div class="TpRna-camera">
							<img v-if="qyisfileimg1" :src="qyfileimg1" class="TpRna-cameraimg TpRna-fileimg" />
							<img v-else class="TpRna-cameraimg TpRna-fileimg" src="../assets/img/images/images/TpCna_45.jpg" />
							<input @change="update" name="file" type="file" accept="image/jpeg" multiple id="qyfileimg1" class="TpRna-cameraimg TpRna-inputimg " />
						</div>
					</div>

				</div>

			</div>

			<div class="TpRna-submitbtnbox" v-if="isCertification==0" @click="SetComCard"><button class="TpRna-submitbtn">确认提交</button></div>
			<div class="TpRna-submitbtnbox" v-if="isCertification==3&&Getidentitydata.type==2" @click="SetComCard"><button class="TpRna-submitbtn">重新认证</button></div>
		</div>

	</div>

</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: "TpRna",
		data() {
			return {
				//				TpRnatype: this.$route.query.TpRnatype,
				isCertification: this.$route.query.isCertification,
				getHiss: JSON.parse(sessionStorage.getItem("userinfo")),
				username: '',
				idCrad: '',
				isfileimg1: false,
				isfileimg2: false,
				isfileimg3: false,
				fileimg1: '',
				fileimg2: '',
				fileimg3: '',
				token: '',
				domain: 'https://up-z2.qbox.me/',
				qiniuimglist: [],

				company: '',
				company_number: '',
				legal_person: '',
				contact_number: '',
				qyfileimg1: '',
				qyisfileimg1: false
			}
		},
		mounted() {
			if(this.TpRnatype == 1) {

				if(this.isCertification == 0) {
					//					this.getUploadToken();
				} else {
					this.Getidentity();
				}
			}
			if(this.TpRnatype == 2) {

				if(this.isCertification == 0) {
					//					this.getUploadToken();
				} else {
					this.Getidentity();
				}
			}
			this.getUploadToken();
		},
		computed: {
			...mapGetters([
				'source',
				'qiniuToken',
				'TpRnatype',
				'Getidentitydata'
			])
		},
		methods: {
			...mapActions({
				getUploadToken: 'getUploadToken',
				setLandtypeName: 'setLandtypeName',
				setTpRnaType:'setTpRnaType'
			}),
			SetComCard() {
				if(this.company == "") {
					this.$dialog.toast({
						mes: "请输入公司名称",
						timeout: 1000
					});
					return
				}
				if(this.company_number == "") {
					this.$dialog.toast({
						mes: "请输入营业执照号",
						timeout: 1000
					});
					return
				}
				if(this.legal_person == "") {
					this.$dialog.toast({
						mes: "请输入法人代表",
						timeout: 1000
					});
					return
				}
				if(this.contact_number == "") {
					this.$dialog.toast({
						mes: "请输入联系电话",
						timeout: 1000
					});
					return
				}
				if(this.qyfileimg1 == "") {
					this.$dialog.toast({
						mes: "请上传营业执照照片",
						timeout: 1000
					});
					return
				}
				let ajaxSign = {
					source: this.source, // string 是
					userId: this.getHiss.id.toString(), // string 是
					token: this.getHiss.token, // string 是
					company: this.company, // string 是 公司名称
					company_number: this.company_number, // string 是 营业执照号
					legal_person: this.legal_person, // string 是 法人代表
					contact_number: this.contact_number, // string 是 联系电话
					idCardImgList: this.qiniuimglist.join(","), // string 是 图片id串 用 ","
				}
				let ajaxData = api.getAES(ajaxSign);
				api.SetComCard(ajaxData)
					.then(res => {

						this.$dialog.toast({
							mes: res.msg,
							timeout: 1000
						});
						if(res.sta == 200) {
							this.$router.push({
								path: "/tenantPersonal"
							})
						}
					})
			},
			Getidentity() {
				
						let result = this.Getidentitydata;
						if(result.type == 1) {
									this.setTpRnaType(1);
							this.setLandtypeName("个人房东");
							for(var i = 0; i < result.img.length; i++) {
								this.qiniuimglist = this.qiniuimglist.concat(result.img[i].key);
							}
							this.fileimg1 = result.img[0].imgUrl;
							this.fileimg2 = result.img[1].imgUrl;
							this.fileimg3 = result.img[2].imgUrl;
							this.username = result.name;
							this.idCrad = result.idCard;
							this.isfileimg1 = true;
							this.isfileimg2 = true;
							this.isfileimg3 = true;
						}
						if(result.type == 2) {
									this.setTpRnaType(2);
							this.setLandtypeName("企业房东");
							this.company = result.name;
							this.company_number = result.company_number;
							this.legal_person = result.legal_person;
							this.contact_number = result.contact_number;
							this.qyfileimg1 = result.img[0].imgUrl;
							this.qyisfileimg1 = true;
						}

			},
			setcardfun() {
				if(this.username == "") {
					this.$dialog.toast({
						mes: "请输入您的真实姓名",
						timeout: 1000
					});
					return
				}
				if(this.idCrad == "") {
					this.$dialog.toast({
						mes: "请输入您的有效证件好",
						timeout: 1000
					});
					return
				}
				if(this.qiniuimglist.length != 3) {

					this.$dialog.toast({
						mes: "请上传完整您的证件照片",
						timeout: 1000
					});
					return
				}
				let ajaxSign = {
					source: this.source, //string 是 ios
					userId: this.getHiss.id.toString(),
					token: this.getHiss.token, //string 是
					name: this.username, //string 是 姓名
					idCard: this.idCrad, //string 是 身份证号码
					idCardImgList: this.qiniuimglist.join(",") //string 是 身份证图片ID
				}
				let ajaxData = api.getAES(ajaxSign);
				api.SetIdCard(ajaxData)
					.then(res => {
						this.$dialog.toast({
							mes: res.msg,
							timeout: 1000
						});
						if(res.sta == 200) {
							this.$router.push({
								path: "/tenantPersonal"
							})
						}
					})
			},
			update(e) {
				let file = e.target.files[0];
				let d = new Date();
				let type = file.name.split('.');
				let tokenParem = {
					'putPolicy': '{\"name\":\"$(fname)\",\"size\":\"$(fsize)\",\"w\":\"$(imageInfo.width)\",\"h\":\"$(imageInfo.height)\",\"hash\":\"$(etag)\"}',
					'key': 'orderReview/' + d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.valueOf() + '.' + type[type.length - 1],
					'bucket': this.domain, //七牛的地址，这个是你自己配置的（变量）
				};
				let param = new FormData(); //创建form对象
				param.append('chunk', '0'); //断点传输
				param.append('chunks', '1');
				param.append('file', file, file.name)
				let config = {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				};
				param.append('token', this.qiniuToken);
				this.uploading(param, config, file.name); //然后将参数上传七牛
				this.fileImage(e);
			},
			uploading(param, config, pathName) {
				this.$http.post('http://upload-z2.qiniup.com/', param, config)
					.then(response => {
						this.qiniuimglist = this.qiniuimglist.concat(response.data.hash);
					})
			},
			fileImage(e) {
				let fliename = e.target.id;
				var that = this;
				var file = e.target.files[0];
				if(file.type.split("/")[1] !== "jpeg") {
					alert("请选择JPG的图片")
					return
				}
				var reader = new FileReader(); 
				reader.readAsDataURL(file);   
				reader.onload = function(evt) { 
					if(e.target.id == "fileimg1") {
						that.isfileimg1 = true;
						that.fileimg1 = evt.target.result
					}
					if(e.target.id == "fileimg2") {
						that.isfileimg2 = true;
						that.fileimg2 = evt.target.result
					}
					if(e.target.id == "fileimg3") {
						that.isfileimg3 = true;
						that.fileimg3 = evt.target.result
					}
					if(e.target.id == "qyfileimg1") {
						that.qyisfileimg1 = true;
						that.qyfileimg1 = evt.target.result
					}
				} 
			}
		}
	}
</script>

<style>
	.TpRna {
		padding-bottom: .5rem;
		box-sizing: border-box;
	}
	
	.TpRna input {
		border: none;
		text-align: right;
		font-size: .28rem;
		color: #A4A4A4;
	}
	
	.TpRna .myyd-cell-item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: .28rem .24rem;
		box-sizing: border-box;
		font-size: .28rem;
		line-height: .28rem;
		border-bottom: .01rem solid #EEECEC;
	}
	
	::-webkit-input-placeholder {
		font-size: .28rem;
		color: #A4A4A4;
	}
	
	.TpRnac-title {
		color: #666666;
		font-size: .28rem;
		display: flex;
		-webkit-flex-wrap: wrap;
	}
	
	.TpRnac-title>span {
		color: #fff;
		display: block;
		width: .42rem;
		height: .42rem;
		position: relative;
		background: #E25051;
		text-align: center;
		line-height: .42rem;
		transform: rotate(45deg) translateY(.2rem);
	}
	
	.TpRnac-title>p {
		width: 88%;
		margin-left: .15rem;
	}
	
	.TpRnac-title>span i {
		display: block;
		transform: rotate(-45deg);
	}
	
	.TpRna-content {
		padding: .38rem .66rem;
		box-sizing: border-box;
	}
	
	.TpRna-camerabox {
		width: 100%;
	}
	
	.TpRna-camera {
		position: relative;
		width: 3.71rem;
		height: 2.08rem;
		margin: auto;
		margin-top: .19rem;
	}
	
	.TpRna-cameraimg {
		display: block;
		width: 3.71rem;
		height: 2.08rem;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.TpRna-inputimg {
		opacity: 0;
	}
	
	.TpRna-conitem {
		margin-top: .17rem;
	}
	
	.TpRna-submitbtnbox {
		width: 100%;
		font-size: .35rem;
		line-height: 1.01rem;
		text-align: center;
	}
	
	.TpRna-submitbtn {
		border: none;
		border-radius: .1rem;
		width: 4.6rem;
		height: .9rem;
		background: #E25051;
		color: #fff;
		text-align: center;
	}
</style>